const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const address = require('address')
const localhost = address.ip() || 'localhost'
// vue.config.js 配置说明
// 官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  // outputDir: './www/',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'assets',
  // 指定生成的 index.html 的输出路径  (打包之后，改变系统默认的index.html的文件名)
  // indexPath: "myIndex.html",
  // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
  // filenameHashing: false,

  //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
  //   lintOnSave: true,
  // 如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
  lintOnSave: false,

  // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
  // runtimeCompiler: false,
  css: {
    // 是否使用css分离插件 ExtractTextPlugin  生产环境下是 true，开发环境下是 false
    // extract: true,
    // 开启 CSS source maps?
    sourceMap: process.env.NODE_ENV !== 'production',
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 192  //设计稿的分辨率/10
          })
        ]
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  /**
   * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   *  打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
   *  map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
   *  有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
   * */
  productionSourceMap: false,
  chainWebpack: config => {
    // #region 忽略生成环境打包的文件
    var externals = {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      // // 'element-ui': 'ELEMENT',
      axios: 'axios',
      moment: 'moment'
      // echarts: 'echarts'
    }
    if (process.env.NODE_ENV === 'production') {
      // 使用cdn
      // config.externals(externals)

      // 打包后显示打包文件大小
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
    // config.externals(externals)

    const cdn = {
      // 配置cdn地址
      css: [
        // element-ui css
        // 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
      ],
      js: [
        // vue
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        // vue-router
        'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
        // vuex
        'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
        // element
        // 'https://unpkg.com/element-ui/lib/index.js',
        // moment
        'https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js',
        // charts
        // 'https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js',
        // v-charts
        // axios
        'https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js'
        // element-ui js
      ]
    }

    // 将配置好的cdn地址注入到 ./public/index.html中
    // config.plugin('html').tap(args => {
    //   args[0].cdn = cdn
    //   return args
    // })

    // #endregion
    // 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同
    config.plugin('define').tap(args => {
      args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL)
      args[0]['process.env'].UPOLAD_URL = JSON.stringify(
        process.env.UPOLAD_URL
      )
      return args
    })

    config // 兼容ie
      .entry('index')
      .add('babel-polyfill')
  },
  transpileDependencies: ['vue-echarts', 'resize-detector', 'vue-echarts-v3', 'js-base64'],
  //   修改webpac配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 如果是生产环境，去除console
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true, // console
              drop_console: true,
              pure_funcs: ['console.log'] // 移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      )
    }
  },

  // 第三方插件配置
  pluginOptions: {
    // ...·
  },

  //   它支持webPack-dev-server的所有选项
  devServer: {
    host: localhost,
    port: 8082, // 端口号
    // https: false, // https:{type:Boolean}
    open: true, // 配置自动启动浏览器
    https: false,
    // 配置多个代理
    // baseUrl: '/',
    proxy: {
      '/api': {
        target: 'http://192.168.1.50:9026/api/governance', // 线下
        // target: 'http://118.122.86.3:80/api/governance', // 线上
        // target: 'http://fpkf.cdht.gov.cn',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
